<template>
   <div class="holdActivity">
     <!-- <upload-img></upload-img> -->
     <div class="wrapper">
       <div class="activity_item">
        <div>活动名称</div>
        <input type="text" placeholder="输入活动名称" v-model="activity_name">
      </div>
      <div class="activity_item">
        <div>活动分类</div>
        <picker @change="select_activity_type"  :range="activity_type_list" class="picker">
          <div class="picker" v-if="activity_type">
              {{activity_type}}
          </div>
          <div v-else class="placeholder">选择活动分类</div>
        </picker>
        
      </div>
      <div class="activity_item" v-if="activity_type_list_second.length>0">
        <div>二级活动分类</div>
        <picker @change="select_activity_type_second"  :range="activity_type_list_second" class="picker">
          <div class="picker" v-if="activity_type_second">
              {{activity_type_second}}
          </div>
          <div v-else class="placeholder">选择二级活动分类</div>
        </picker>
      </div>
      <div class="activity_item">
        <div>活动负责人</div>
        <input type="text" placeholder="输入活动负责人"  v-model="re_person">
      </div>
      <div class="activity_item">
        <div>活动主题</div>
        <input type="text" placeholder="输入活动主题" v-model="activity_theme">
      </div>
      <div class="activity_item" @click="selectStartDate">
          <div class="picker_name" >活动开始时间</div>
          <div v-if="!activity_date_start" class="placeholder">选择开始时间</div>
          <div v-else>{{activity_date_start}}</div>
      </div>
      <div class="activity_item" @click="selectEndDate">
          <div class="picker_name" >活动结束时间</div>
          <div v-if="!activity_date_end" class="placeholder">选择结束时间</div>
          <div v-else>{{activity_date_end}}</div>
      </div>
      <div class="activity_item">
        <div>报名费用</div>
        <input type="text" placeholder="输入报名费用" v-model="activity_cost">
      </div>
      <div class="activity_item">
        <div>活动地点</div>
        <picker mode="region" @change="bindRegionChange" :value="region" class="picker">
          <div v-if="region">{{region[0]}}{{region[1]}}{{region[2]}}</div>
          <div class="placeholder" v-else>选择活动地点</div>
        </picker>
        
      </div>
      <div class="activity_item">
        <div>详细地点</div>
          <input type="text" placeholder="输入详细地点" v-model="address_detail">
      </div>
     </div>
     
    <div class="activity_ready">
       <div class="activity_ready_tit">活动准备</div>
        <textarea maxlength="-1" class="activity_ready_textarea" placeholder="输入活动准备" v-model="activity_desc"></textarea>
     </div>
     <div class="activity_intro">
       <div class="activity_intro_tit">封面图片</div>
        <upload-img @hasUpload="getImg"></upload-img>
     </div>   
     
     <div class="activity_radio">
       <div class="activity_radio_tit">活动视频</div>
       <div class="radio_wrapper" v-if="video_url">
         <div class="delete_logo" @click="deleteVideo">
          <img src="../../../static/images/delete.png" alt="">
        </div>
        <video id="myVideo"  :src="video_url" controls ></video>
       </div>
        <div class="activity_ready_textarea1" @click="uploadVideo" v-else>
          <div class="tip1">添加你的活动视频</div>
        </div>
     </div>
     <div class="activity_intro">
       <div class="activity_intro_tit">活动介绍</div>
       <textarea maxlength="-1" class="activity_intro_textarea" placeholder="输入活动介绍" v-model="activity_intro_desc"></textarea>
        <upload-imglist @hasUploadList="getImgList"></upload-imglist>
     </div>
     <!-- <div class="activity_intro">
       <div class="activity_intro_tit">活动介绍</div>
        <textarea maxlength="-1" class="activity_intro_textarea" placeholder="输入活动介绍"  v-model="activity_info"></textarea>
     </div>
     <div class="activity_detail">
       <div class="activity_detail_tit">活动详情</div>
        <editor-me @sendEditorContext="sendEditorContext"></editor-me>
     </div> -->

     <div class="submit"><div class="btn" @click="submit">提交</div></div>
     <van-popup
        :show="show"
        position="bottom"
        @close="onClose"
      >
      <van-datetime-picker
          v-show="show"
          type="datetime"
          :value="currentDate"
          @confirm="getDate"
          @cancel="onClose"
        >
        </van-datetime-picker>
    </van-popup>  
   </div>
</template>
<script>
import uploadImg from '@/components/uploadImg';
import uploadImglist from '@/components/uploadImglist'
import { setTimeout } from 'timers';
import { rejects } from 'assert';
export default {
  components:{uploadImg,uploadImglist},
  data() {
    return {
      activity_name:'',
      re_person:'',//负责人
      classifyInitData:'',//活动分类的初始数据
      activity_type:'',
      activity_type_id:'',//活动分类id
      activity_type_list:'',//活动分类
      activity_type_Idlist:'',//活动分类的选中

      activity_type_second:'',//二级分类显示的文字
      activity_type_id_second:'',//二级分类的分类
      activity_type_list_second:[],//二级活动分类
      activity_type_Idlist_second:'',//二级活动分类的选中


      activity_desc:'',
      activity_info:'',//	活动介绍
      address_detail:'',
      activity_theme:'',
      activity_cost:'',
      activity_detail:'',
      video_id:'',  
      video_url:'', 
      limitFlag:'',//start是开始时间,end是结束时间
      activity_date_start:'',
      activity_date_end:'',
      region: '',
      show:false,
      img_id:'',
      img_idList:'',
      editor:'',//富文本的实例
      currentDate: new Date().getTime(),
      activity_intro_desc:''//活动介绍文字内容
    }
  },
  methods: {
    select_activity_type(e){
      const index=e.target.value
      this.activity_type=this.activity_type_list[index];
      this.activity_type_id=this.activity_type_Idlist[index];
      this.getClassify_second(this.activity_type_id);//更新2级选项的数据
      this.activity_type_second='';
      this.activity_type_id_second='';
    },
    select_activity_type_second(e){
      const index=e.target.value
      this.activity_type_second=this.activity_type_list_second[index];
      this.activity_type_id_second=this.activity_type_Idlist_second[index];
    },
    selectStartDate(e){
      this.show=true;
      this.limitFlag='start'
    },
    selectEndDate(e){
      this.show=true;
      this.limitFlag='end'
    },
    getDate(event) {
      if(this.limitFlag=='start'){
        this.activity_date_start= this.toDate(event.mp.detail)
      }else{
        this.activity_date_end= this.toDate(event.mp.detail)
      }
      this.show=false

    },
    getImg(e){
      this.img_id=e
    },
    getImgList(e){
      this.img_idList=e
    },
    toDate(time){
      var t=new Date(time)
      const y=t.getFullYear();
      const m=t.getMonth()+1;
      const d = t.getDate();
      const h = t.getHours();
      const mm = t.getMinutes();
      return `${y}-${m}-${add(d)} ${add(h)}:${add(mm)}`
      function add(m){return m<10?'0'+m:m }
    },
     uploadVideo(){
      var that = this
      wx.chooseVideo({
        success: function(res) {
          that.uploadCallback(res)
        }
      })
    },
    uploadCallback: function(res1) {
      const that=this
      var src = res1.tempFilePath;
      wx.uploadFile({
        url: 'https://study.rzkeji.com/api/file/upload-video',//服务器接口
        method: 'POST',//这句话好像可以不用
        filePath: src,
        header: {
          'content-type': 'multipart/form-data'
        },
        name: 'video',//服务器定义的Key值
        success: function(res) {
          const res1=JSON.parse(res.data)
          that.video_id=res1.data.id;
          that.video_url=res1.data.video_url;
        },
        fail: function() {
          console.log('接口调用失败')
        }
    })},

    onClose(){
      this.show=false
    },
    sendEditorContext(e){
      //获取详情信息
      // this.activity_detail=e.mp.detail
      this.editor=e.mp.detail
    },
    bindRegionChange(e){
      //获取活动地点
      this.region=e.target.value
    },
    async getClassify(){
      const res= await this.$request.getData('/activity/classify');
      if(res.data.level=='success'){
        const arr=res.data.data;
        this.classifyInitData=arr;//分类的初始数据
        const arrId=[];
        const arrName=[];
        arr.forEach(item=>{
          arrId.push(item.id);
          arrName.push(item.name)
        })
        this.activity_type_list=arrName;
        this.activity_type_Idlist=arrId;

      }
    },
    getClassify_second(id){
      //获取二级分类
      const arr=this.classifyInitData.find(item=>{
        if(item.id==id){
          return item
        }
      })
     const secondArr=arr.child_classify_list;
     const arrId=[];
      const arrName=[];
      secondArr.forEach(item=>{
        arrId.push(item.id);
        arrName.push(item.name)
      })
      this.activity_type_list_second=arrName;
      this.activity_type_Idlist_second=arrId;
    },
    deleteVideo(){
      this.video_id='';
      this.video_url=''
    },
    getEditor(){
      const that=this
       let state=new Promise((resolve,reject)=>{
         this.editor.getContents({

        success: (res) => {        
          // console.log("succ：" + res.html);
          that.activity_detail=res.html
          resolve(true)
        },
        fail:(res)=>{
          // console.log("fail：" + res); 
          reject(false)
        }})
       })
       return state
    },
    async submit(){
      // const state=await this.getEditor()
      var userToken = wx.getStorageSync('userToken');
      const res=await this.$request.postData('/activity/buildActivity',{
        user_token:userToken,
        name:this.activity_name,
        img_id:this.img_id,
        classify_id:this.activity_type_id,
        classify_two:this.activity_type_id_second,
        desc:this.activity_desc,
        province:this.region[0],
        city:this.region[1],
        area:this.region[2],
        address_detail:this.address_detail,
        theme:this.activity_theme,
        start_time:this.activity_date_start,
        end_time:this.activity_date_end,
        cost:this.activity_cost,
        re_person:this.re_person,
        // info:this.activity_info,
        video_id:this.video_id,
        // detail:this.activity_detail,
        info_img_ids:this.img_idList ||[],
        app_detail:this.activity_intro_desc
      })
      if(res.data.level=='success'){
        this.$currency.showToast(res.data.message);
        setTimeout(()=>{
          this.$currency.switchTab('/pages/activity/main')
        },2000)
      }else{
        this.$currency.showToast(res.data.message);
      }
    },
    initDAta(){
      this.activity_name='';
      this.re_person='';//负责人
      this.activity_type='';
      this.activity_type_id='';//活动分类id
      this.activity_type_list='';//活动分类
      this.activity_type_Idlist='';//活动分类的选中
      this.activity_desc='';
      this.activity_info='';//	活动介绍
      this.address_detail='';
      this.activity_theme='';
      this.activity_cost='';
      this.activity_detail='';
      this.video_id='';  
      this.video_url=''; 
      this.limitFlag='';//start是开始时间;end是结束时间
      this.activity_date_start='';
      this.activity_date_end='';
      this.region= '';
      this.show=false;
      this.img_id='';
      this.img_idList='';
      this.editor='';//富文本的实例
      this.currentDate= new Date().getTime()
    }
  },
  onLoad(){
    this.initDAta();
    this.getClassify()
  },
  mounted() {
    
  },
}
</script>
<style lang="scss" scoped>
  .holdActivity{
    width: 100%;
    min-height: 100vh;
    background:#eee;
    font-size: 14px;
    vertical-align:center !important;
    box-sizing: content-box !important;
    
  }
  .wrapper{
    padding-top:30px;
  }
  .activity_item{
    background: #fff;
    display: flex;
    padding:10px 20px;
    width:100%;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    .placeholder{
      color:gray;
    }
    .picker{
      flex:1
    }
    &>div:first-child{
      height: 30px;
      line-height: 30px;
      width: 120px
    }
    &>div:last-child,&>input{
      flex:1
    }
  }

  //活动介绍
  .activity_intro,.activity_radio{
    margin-top:20px;
    
  }
  .activity_intro_textarea{
    border:2px dashed gray;
    box-sizing: border-box;
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
  }
  .activity_intro,.activity_ready,.activity_radio,.activity_detail{
    background: #fff;
    padding:20px;
    margin-bottom: 10px;
    &_tit{
      width: 100%;
      padding:20px 0;
    }
    &_textarea{
      border:2px dashed gray;
      width: 100%;
      height: 150px;
    }
    &_textarea1{
      border:2px dashed gray;
      width: 100%;
      height: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      .tip1{
        color:gray;
      }
    }
  }
  .activity_radio{
    video{
      width: 100%;
    }
    .radio_wrapper{
      position: relative;
    }
    .delete_logo{
      position: absolute;
      right: -15px;
      top:-15px;
      z-index: 99;
      img{
        width: 30px;
        height: 30px;
      }
    }
  }

  .submit{
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn{
      margin:20px 0;
      color:#fff;
      padding:10px;
      width: 120px;
      text-align: center;
      border-radius: 10px;
      background: rgb(236, 134, 134);
    }
  }
</style>

